import React from 'react';
import loadjs from 'loadjs';
import Column from './Column';
import { WeaTools } from 'ecCom';
import { observer } from 'mobx-react';
import { MouseWheelFun } from './util/compatible';
import { BoardProps } from '.';
import ColumnAdd from './ColumnAdd';
import jQuery from 'jquery';

@observer
export default class Container extends React.Component<BoardProps, any>{

    componentDidMount() {
        const {boardStore}=this.props;
        let jsFiles:string[]=[];
        if(!WeaTools.isBelowIE9()){
            jsFiles.push('/formmode/e9resource/boardjs/web-animations.min.js');
        }
        jsFiles=[...jsFiles,'/formmode/e9resource/boardjs/hammer.min.js','/formmode/e9resource/boardjs/muuri.js'];
        if (!loadjs.isDefined('boardjs')) {
            loadjs(jsFiles, 'boardjs', {
                    success: () => {
                        boardStore.initData();
                    }
                });
        } else {
            boardStore.initData();
        }
        MouseWheelFun('cube_board_container','cube_board');
    }

    render() {
        const {boardStore}=this.props;
        const height = boardStore.windowHeight - jQuery('#btnDiv').height();
        return <section id='cube_board_container' className="cube_board_container" style={{ height }}>
            <div id="cube_board" className="board muuri" style={{ height: '100%' }}>
                {boardStore.datasIdList.map(element=>{
                    return <Column key={boardStore.timestamp+""+element} element={element} boardStore={boardStore}/>
                })}
                {boardStore.hasRight &&
                <ColumnAdd key={boardStore.boardid + "_" + boardStore.resourceid + "_" + boardStore.timestamp}
                           sureFun={boardStore.addColumn} defaultTabSet={boardStore.defaultTabSet}/>}
            </div>
        </section>
    }
}